<template>
	<el-container>
		<el-aside width="200px">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="groupData" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
				</el-main>
			</el-container>
		</el-aside>
        <el-container>
			<el-header>
				<!-- <div class="left-panel">
					<el-button type="primary" icon="el-icon-plus"></el-button>
					<el-button type="danger" plain icon="el-icon-delete"></el-button>
				</div> -->
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="search.keyword" placeholder="请输入编号" clearable style="width:15%"></el-input>
						<el-input v-model="search.keyword" placeholder="请输入名称" clearable style="width:15%"></el-input>
                        <div class="right-panel-search">
						<div class="search-input">分类</div>
						<el-select v-model="search.cid"  filterable clearable>
							<el-option v-for="item in cates" :key="item.id" :label="item.name" :value="item.id"/>
						</el-select>
                        <div class="search-input">低库存</div>
						<el-select v-model="search.cid"  filterable clearable>
							<el-option v-for="item in cates" :key="item.id" :label="item.name" :value="item.id"/>
						</el-select>
					</div>
						<el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
					</div>
                    <div class="finish">
                        <div class="finishNum">库存总数:<div class="text">1200</div></div>
                        <div class="finishNum">库存货值:<div class="text">110</div></div>
                    </div>
                    <el-button type="primary" >导出库存表</el-button>
            	    <el-button type="primary" >批量生产</el-button>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="apiObj" stripe remoteSort remoteFilter border>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column label="序号" type="index" width="130"></el-table-column>
					<el-table-column label="客户" prop="sex" width="130"></el-table-column>
					<el-table-column label="单号" prop="email" width="130"></el-table-column>
					<el-table-column label="唛头" prop="num" width="130"></el-table-column>
					<el-table-column label="OE" prop="datetime" width="130"></el-table-column>
					<el-table-column label="图片" prop="datetime" width="130">
                        <template #default="scope">
							<el-image
								style="width: 50px; height: 50px; border-radius: 5px;"
								:src="scope.row.banner"
								:preview-src-list="[scope.row.banner]"
								preview-teleported="true"
							></el-image>
						 </template>
                    </el-table-column>
					<el-table-column label="尺寸" prop="datetime" width="130"></el-table-column>
					<el-table-column label="生产图片" prop="datetime" width="130">
                        <template #default="scope">
							<el-image
								style="width: 50px; height: 50px; border-radius: 5px;"
								:src="scope.row.banner"
								:preview-src-list="[scope.row.banner]"
								preview-teleported="true"
							></el-image>
						 </template>
                    </el-table-column>
					<el-table-column label="仓库" prop="datetime" width="130"></el-table-column>
					<el-table-column label="库位" prop="datetime" width="130"></el-table-column>
					<el-table-column label="库存描述" prop="datetime" width="130"></el-table-column>
					<el-table-column label="库存数量" prop="datetime" width="130"></el-table-column>
					<el-table-column label="所属商户" prop="datetime" width="130"></el-table-column>
                    <el-table-column label="操作" fixed="right" align="center" width="100">
						<template #default>
							<el-button-group>
								<el-button type="primary" size="small">查看</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
export default {
	name: 'user',
	data() {
		return {
			groupFilterText: '',
			// apiObj: this.$API.cms.recommend.lists,
            cates: [],
            groupData: [
                {
                    id: "",
                    label: "所有"
                },
                {
                    id: "1",
                    label: "A库",
                    children: [
                        {
                            id: "11",
                            label: "B01库位"
                        },
                        {
                            id: "12",
                            label: "B02库位"
                        },
                        {
                            id: "13",
                            label: "B03库位"
                        }
                    ]
                },
                {
                    id: "2",
                    label: "B库",
                    children: [
                        {
                            id: "21",
                            label: "B01库位"
                        },
                        {
                            id: "22",
                            label: "B02库位"
                        },
                        {
                            id: "23",
                            label: "B03库位"
                        }
                    ]
                }
            ],
            search:{

            }
		}
	},
	watch: {
        groupFilterText(val) {
            this.$refs.group.filter(val);
        }
    },
    mounted() {
		this.getCate()
	},
	methods: {
		//树过滤
			groupFilterNode(value, data){
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			//树点击事件
			groupClick(data){
				var params = {
					groupId: data.id
				}
				this.$refs.table.reload(params)
			},
            async getCate(){
                // var res = await this.$API.cms.profile.article_cate.get();
                // this.cates = res.data;
            },
	}
}
</script>

<style lang="scss" scoped>
.search-input {
	width: auto;
	font-size: 14px;
}
// .right-panel-search{
//     margin-right: 20px;
// }
.inputDeep {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    height: 20px;
    background: transparent;
    cursor: default;
    .el-input__inner {
      cursor: default !important;
    }
  }
}
.finish{
    display: flex;
    align-items: center;
    font-size: 20px;
    .finishNum{
        display: flex;
        align-items: flex-end;
        margin-right:12px;
    }
    .text{
        font-size: 18px;
        color: #409EFF;
        margin-left: 4px;
        font-weight: 600;
    }
}
</style>
